<template>
    <div>
        <!-- 表单部分 -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="停车场编号">
                <el-input v-model="formInline.user" placeholder="停车场编号" />
            </el-form-item>
            <el-form-item label="停车场状态">
                <el-select v-model="formInline.region" class="small-ipt">
                    <!--  <el-option label="Zone one" value="shanghai" />
                    <el-option label="Zone two" value="beijing" /> -->
                </el-select>
            </el-form-item>
            <el-form-item label="停车位属性">
                <el-select v-model="formInline.region" class="small-ipt">
                    <el-option label="Zone one" value="shanghai" />
                </el-select>
            </el-form-item>
        </el-form>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="所属区域">
                <el-select v-model="formInline.province" placeholder="省">
                    <el-option label="省" value="shanghai" />
                </el-select>
                <el-select v-model="formInline.city" class="small-ipt" placeholder="市">
                    <el-option label="市" value="shanghai" />
                </el-select>
                <el-select v-model="formInline.strict" class="small-ipt" placeholder="区">
                    <el-option label="区" value="shanghai" />
                </el-select>
            </el-form-item>
            <el-form-item label="所属停车场">
                <el-select v-model="formInline.depend">
                    <el-option label="区域1" value="123" />
                    <el-option label="区域2" value="321" />
                </el-select>
            </el-form-item>
            <el-form-item label="停车位属性">
                <el-select v-model="formInline.region">
                    <el-option label="Zone one" value="shanghai" />
                </el-select>
            </el-form-item>
        </el-form>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="停车场属性">
                <el-input v-model="formInline.state" />
            </el-form-item>
            <el-form-item class="btns_rig">
                <el-button type="success" @click="resetForm">重置</el-button>
                <el-button type="success" @click="onSearch">查询</el-button>
                <el-button type="primary" @click="addToParking">新增</el-button>
            </el-form-item>
        </el-form>

        <!-- 表格部分 -->
        <Table :tableData="tableData" :options="_options" @row-edit="rowEdit" @row-del="rowDel"></Table>
        <!-- 分页 -->
        <div class="example-pagination-block">
            <el-pagination v-model:page-size="pageSize" v-model:current-page="page" layout="prev, pager, next"
                :total="total" background="skyblue" />
        </div>
    </div>
</template>

<script setup lang="ts">
import Table from "../../components/table/index.vue"
import { ref, reactive, onMounted, watch } from "vue";
import { fetchCates } from '@a/home'
import { useRouter } from 'vue-router'
const router = useRouter()
const _options = reactive({
    // 定义当前 table 表格的表头数据
    column: [
        {
            prop: 'id',
            label: '停车位编号',
            width: 130
        },
        {
            prop: 'createAt',
            label: '停车时间',
            width: 130
        },
        {
            prop: 'partName',
            label: '所属停车场',
            width: 130
        },
        {
            prop: 'desc',
            label: '所属道路',
            width: 200
        },
        {
            prop: 'desc',
            label: '所属区域',
            width: 220
        },
        {
            prop: 'onsale2',
            label: '停车位状态',
            width: 130
        },
        {
            prop: 'price',
            label: '应付费用',
            width: 130
        },
        {
            prop: 'onsale',
            label: '停车位属性',
            width: 130
        },




    ],
    // 定义当前 table 表格的 选择栏的状态
    // 是否存在 选择栏
    /*    Checkbox: true,
       // 操作栏的宽度
       CheckboxWidth: 50,
       // 操作栏是否固定
       CheckboxFixed: true, */


    // 定义当前 table 表格的操作栏的状态
    // 是否存在 操作栏
    Operation: true,
    // 操作栏的标题
    OperateTitle: "操作选项",
    // 操作栏的宽度
    OperateWidth: 260,
    // 操作栏是否固定
    OperateFixed: true

})
// 表单部分
const formInline = reactive({
    user: '',
    region: '',
    province:'安徽省',
    city:'合肥市',
    strict:'包河区',
    depend:'',
    state:''
})

// 分页
const page = ref(1)
const pageSize = ref(10)
const total = ref(0)

const tableData: any = ref([])
const getCates = () => {
    fetchCates({
        ...formInline,
        page: page.value,
        pageSize: pageSize.value
    }).then(res => {
        console.log(res);
        tableData.value = res.data.data.lists
        total.value = res.data.data.total
    })
}

watch(page, () => {
    getCates()
},
    { immediate: true }
);
watch(pageSize, () => {
    getCates()
},
    { immediate: true }
);

onMounted(() => {
    getCates()

})




// 新增停车场
const addToParking = () => {
    router.push('/addParking')
}

// 查询数据
const onSearch = () => {
    getCates()
    router.go(0)
}

// 重置表单
const resetForm = () => {
    router.go(0)
}

</script>

<style scoped lang="scss">
.small-ipt {
    width: 130px;
}

.btns_rig {
    float: right;
}

.example-pagination-block {
    margin-top: 50px;
}
</style>